<!--
 * @Author: your name
 * @Date: 2021-05-17 09:27:40
 * @LastEditTime: 2021-05-21 15:10:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \english\src\views\Wrong .vue
-->
<template>
  <div class="wrong">
    <div class="mains">
      <!-- <div class="tops_Head">
        <div class="top_left">在线英语学习系统</div>
        <div class="top_right">
          <div class="time">2021-05-11 14:38</div>
        </div>
      </div> -->

      <Head />
      <div class="title_wrok">
        <div class="tit_left">错题本</div>
        <div class="tit_right" @click="back()">x</div>
      </div>
      <div class="export">
        <div class="exports">
          <span>导出词句</span>
          <span>导出词义</span>
          <span>导出例句</span>
        </div>
      </div>
      <div class="content">
        <div class="con_left">
          <div class="listnav">
            <div class="tit" @click="check(1)" :class="{ back: shows == 1 }">
              学习记录
            </div>
            <div class="tit tit2" @click="check(2)" :class="{ back: shows == 2 }">
              考试错题
            </div>
          </div>
          <!-- list -->
          <div class="textlist">
            <div class="listli" v-for="(item, index) in list" :key="item.id" v-show="shows == 1" :class="{ active: currentIndex === index }" @click="handler(index)">
              {{ item.cont }}
            </div>
            <div class="listli" v-for="(item, index) in list1" :key="item.id" v-show="shows == 2" :class="{ active: currentIndex === index }" @click="handler(index)">
              {{ item.cont }}
            </div>
          </div>
        </div>
        <div class="con_right">
          <div class="right_main" v-show="shows == 1">
            <!-- 循环体 -->
            <div class="lifor" v-for="(item, index) in list3" :key="item.id" :class="{ on: index % 2 != 0 }">
              <div class="lifortop">
                <div class="liones">
                  <img src="../assets/A.png" alt="" />
                  <div>
                    <span style="color: red"> {{ item.title }} </span>
                    <span style="margin-left: 10px"> {{ item.dygh }} </span>
                  </div>
                </div>
                <div class="litwo">
                  <img src="../assets/lab.png" alt="" />
                  <img src="../assets/xz4.png" alt="" @click="dj(item.id)" />
                </div>
              </div>
              <div class="liforbot" v-show="showss == item.id">
                <p>{{ item.Chinese }}</p>
                <p>{{ item.English }}</p>
                <p>{{ item.example }}</p>
                <p>{{ item.else }}</p>
              </div>
            </div>
          </div>
          <div class="right_mains" v-show="shows == 2">
            <div class="listfors" v-for="item in error" :key="item.id">
              <p class="title">{{ item.title }}</p>
              <div class="table">
                <p>{{ item.answer }}</p>
                <img src="../assets/zq.png" alt="" v-show="zq == 1" />
              </div>
              <!-- <div class="table">
                <p>A. n.失望的；沮丧；扫兴</p>
                <img src="../assets/zq.png" alt="" v-show="zq == 1" />
              </div>
              <div class="table">
                <p>A. n.失望的；沮丧；扫兴</p>
                <img src="../assets/zq.png" alt="" v-show="zq == 1" />
              </div>
              <div class="table">
                <p>A. n.失望的；沮丧；扫兴</p>
                <img src="../assets/zq.png" alt="" v-show="zq == 1" />
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
  // import axios from "axios";
  import Footer from "../components/Footer.vue";
  import Head from "../components/Head.vue";
  import {
    wrongTi
  } from '@/api'
  export default {
    components: {
      Footer,
      Head
    },
    data() {
      return {
        //       list:[
        //         {namw:'1'},{namw:'1'},{namw:'1'},{namw:'1'},
        //       ],
        //       cot:[],
        //       this.cot=this.list[0]

        // id

        //       this.cot=this.list[id]

        shows: 1,
        showss: null,
        currentIndex: 0,
        list: [{
            cont: "人教版.小学英语一年级一单元 认读",
            id: "1"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "2"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "3"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "4"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "5"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "6"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "7"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "8"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "9"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "10"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "11"
          },
        ],
        list1: [{
            cont: "人教版.小学英语一年级一单元 认读1",
            id: "1"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读1",
            id: "2"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读1",
            id: "3"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "4"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "5"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "6"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "7"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "8"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "9"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "10"
          },
          {
            cont: "人教版.小学英语一年级一单元 认读",
            id: "11"
          },
        ],
        list3: [
          // { id: 1, tit: "village" },
          // { id: 2, tit: "villages" },
        ],
        // 正确
        zq: 1,
        error: [],
      };
    },
    methods: {
      // 切换list
      check(a) {
        console.log(a);
        this.shows = a;
      },
      handler(index) {
        this.currentIndex = index;
        console.log(index);
      },
      dj(a) {
        this.showss = a;
      },
      back() {
        this.$router.push("index");
      },
    },
    created() {
      let that = this;
      wrongTi().then((response) => {
        // console.log(response);
        that.list3 = response.data.buhui;
        that.error = response.data.cuoti;
      })
      // axios.get("/api/Error/index").then((res) => {
      //   console.log(res.data.data.buhui), console.log;
      //   that.list3 = res.data.data.buhui;
      //   that.error = res.data.data.cuoti;
      //   console.log(that.error, "111");
      //   // console.log(that.list3);
      // });

      // axios.get('')
    },
  };

</script>
<style lang="scss" scoped>
  .back {
    background: #3571ff !important;
  }

  .on {
    background: #fff !important;
  }

  .active {
    padding: 30px;
    background: #f5f5f5 !important;
  }

  .wrong {
    background: #f5f5f5;

    .mains {
      width: 90%;
      margin: 0 auto;

      .tops_Head {
        display: flex;
        justify-content: space-between;

        .top_left {
          font-size: 33px;
          font-weight: bold;
        }

        .top_right {
          width: 300px;
          line-height: 38px;
          font-size: 28px;
          text-align: right;
        }
      }

      // 错题本标题
      .title_wrok {
        background: #3571ff;
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: 26px;
        // width: 90%;
        margin: 0 auto;
        padding: 0 1%;

        .tit_right {
          cursor: pointer;
        }
      }

      // 导出
      .export {
        overflow: hidden;
        background: #c5c5c5;
        padding: 5px 0;

        .exports {
          span {
            padding: 0 20px;
          }

          float: right;
          color: #fff;
          // span {
          //   border: 1px solid red;
          // }
        }
      }

      .content {
        display: flex;
        justify-content: space-between;
        // width: 92%;
        margin: 0 auto;

        .con_left {
          width: 28%;
          padding-right: 2%;
          background: #fff;

          .listnav {
            // border: 1px solid red;
            display: flex;
            justify-content: space-around;
            padding: 30px 0;

            .tit {
              background: #666666;
              color: #fff;
              text-align: center;
              padding: 10px 0;
              width: 50%;
              cursor: pointer;
            }

            // .tit2 {
            //   background: #3571ff;
            // }
          }

          .textlist {

            // border: 1px solid red;
            .listli {
              background: #fff;
              border-bottom: 2px solid #fafafa;
              padding: 10px 10px;
              cursor: pointer;
            }
          }
        }

        .con_right {
          // border: 1px solid red;
          width: 70%;
          overflow-y: auto;
          height: 600px;

          .right_main {
            width: 100%;

            // border: 1px solid red;
            .lifor {
              // border: 1px solid red;
              padding: 20px 0;

              .lifortop {
                // border: 1px solid green;
                display: flex;
                justify-content: space-between;

                div {
                  display: flex;
                  justify-content: space-between;
                  // border: 1px solid red;
                }

                .liones {
                  img {
                    display: block;
                    width: 23px;
                    height: 21px;
                    margin-left: 10px;
                  }

                  div {
                    margin-left: 30px;
                  }
                }

                .litwo {
                  img {
                    margin-right: 10px;
                    cursor: pointer;
                  }
                }
              }

              .liforbot {
                padding-left: 50px;
                margin-top: 20px;
              }
            }
          }

          .right_mains {

            // border: 1px solid red;
            .listfors {
              background: #fff;
              width: 98%;
              margin-left: 2%;
              padding: 5px 0;
              margin-bottom: 20px;

              // border: 1px solid red;
              .title {
                color: red;
                font-size: 32px;
                padding: 5px 0;
                padding-left: 2%;
              }

              .table {
                // border: 1px solid red;
                margin-left: 2%;
                display: flex;
                justify-content: left;
                padding: 5px 0;

                p {
                  width: 600px;
                  padding: 0 5px;
                  border: 1px solid #c5c5c5;
                  height: 43px;
                  line-height: 43px;
                }

                img {
                  width: 43px;
                  height: 43px;
                  margin-left: 5px;
                }
              }
            }
          }
        }
      }
    }
  }

</style>
